<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="#" type="image/png">

    <title>部门管理</title>

    <!--data table-->
    <link rel="stylesheet" href="js/data-tables/DT_bootstrap.css" />

    <link href="css/style.css" rel="stylesheet">
    <link href="css/style-responsive.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->

    <style type="text/css">
        #all_light { /*整个弹窗的页面*/
            opacity: 0.8; /*透明度*/
            width: 100%; /*宽度*/
            height: 2300px; /*高度，不能百分百*/
            background: #000; /*背景色*/
            position: absolute;
            top: 0;
            left: 0; /*定位*/
            display: none; /*隐藏*/
            z-index: 2; /*覆盖*/
        }
        #contes { /* 弹框的页面*/
            width: 500px; /*宽度*/
            height: 500px; /*高度*/
            background: #fff; /*背景色*/
            display: none; /*隐藏*/
            z-index: 2; /*覆盖*/
            position: absolute;
            top: 100px;
            left: 400px; /* 定位*/
        }
        input{
            margin-bottom: 10px;
        }
    </style>
</head>

<body class="sticky-header">

<!--  弹框的div==================================================================================== -->
<div id="contes" style="">
    <div style="width:500px;height:40px;">
        <hr>
        <h1> ==========更新部门信息==========</h1>
        <form style=" margin-left: 100px;" id="dataform">
            <input type="hidden" id="daid" name="daid">
            <input type="hidden" id="id" name="id">
            部门名字   :  <input id="name" type="text" name="name"  ><br>
            部门经理   :  <input type="text" value="" id="manager"  name="manager"><br>
            部门电话   :  <input type="text" value="" id="phone"  name="phone"><br>
            部门邮箱   :  <input type="text" value="" id="email"  name="email"><br>

            <button type="submit" onclick="submithuoform()">提交</button>
            <button type="button" onclick="cancel()">取消</button>

        </form>
        <h1> ==========更新部门信息==========</h1>
    </div>
</div>
<div id="all_light">
</div>
<!--  弹框的div==================================================================================== -->
<section>
    <!-- left side start-->
    <script src="left.js"></script>
    <!-- left side end-->

    <!-- main content start-->
    <div class="main-content" >

        <!-- header section start-->
        <div class="header-section">

            <!--toggle button start-->
            <a class="toggle-btn"><i class="fa fa-bars"></i></a>
            <!--toggle button end-->

        </div>
        <!-- header section end-->

        <!-- page heading start-->
        <div class="page-heading">
            <h3>
                部门管理
            </h3>
            <ul class="breadcrumb">
                <li>
                    <a href="#">首页</a>
                </li>
                <li>
                    <a href="#">系统信息</a>
                </li>
                <li class="active"> 部门管理 </li>
            </ul>
        </div>
        <!-- page heading end-->

        <!--body wrapper start-->
        <div class="wrapper">
            <div class="row">
                <div class="col-sm-12">
                    <section class="panel">
                        <header class="panel-heading">
                           部门管理
                            <span class="tools pull-right">
                        <a href="javascript:;" class="fa fa-chevron-down"></a>
                        <a href="javascript:;" class="fa fa-times"></a>
                     </span>
                        </header>

                        <div class="panel-body">


                            <!-- 表格 -->
                            <span><h1>采购部门信息</h1></span>
                            <div class="btn-group">
                                <button  class="btn btn-primary" onclick="addItem(1)">
                                    采购部门添加 <i class="fa fa-plus"></i>
                                </button>
                            </div>
                            <table class="table table-striped table-hover table-bordered"
                                   id="editable-sample1">
                                <thead>
                                <tr>
                                    <th prop="id">部门Id号</th>
                                    <th prop="name">部门名字</th>
                                    <th prop="manager">部门经理</th>
                                    <th prop="phone">部门电话</th>
                                    <th prop="email">部门邮箱</th>
                                    <th>修改信息</th>
                                    <th>删除信息</th>
                                </tr>
                                </thead>

                                <tbody id="newList1">

                                </tbody>
                            </table>



                            <span><h1>生产部门信息</h1></span>
                            <div class="btn-group">
                                <button  class="btn btn-primary" onclick="addItem(2)">
                                    生产部门添加 <i class="fa fa-plus"></i>
                                </button>
                            </div>
                            <!-- 表格 -->
                            <table class="table table-striped table-hover table-bordered"
                                   id="editable-sample2">
                                <thead>
                                <tr>
                                    <th prop="id">部门Id号</th>
                                    <th prop="name">部门名字</th>
                                    <th prop="manager">部门经理</th>
                                    <th prop="phone">部门电话</th>
                                    <th prop="email">部门邮箱</th>
                                    <th>修改信息</th>
                                    <th>删除信息</th>
                                </tr>
                                </thead>

                                <tbody id="newList2">

                                </tbody>

                            </table>


                                <!-- 表格 -->
                                <span><h1>销售部门信息</h1></span>
                            <div class="btn-group">
                                <button  class="btn btn-primary" onclick="addItem(3)">
                                    销售部门添加 <i class="fa fa-plus"></i>
                                </button>
                            </div>
                                <table class="table table-striped table-hover table-bordered"
                                       id="editable-sample3">
                                    <thead>
                                    <tr>
                                        <th prop="id">部门Id号</th>
                                        <th prop="name">部门名字</th>
                                        <th prop="manager">部门经理</th>
                                        <th prop="phone">部门电话</th>
                                        <th prop="email">部门邮箱</th>
                                        <th>修改信息</th>
                                        <th>删除信息</th>
                                    </tr>
                                    </thead>

                                    <tbody id="newList3">

                                    </tbody>
                            </table>


                        </div>
                    </section>
                </div>
            </div>
        </div>
        <!--body wrapper end-->


    </div>
    <!-- main content end-->
</section>

<!-- Placed js at the end of the document so the pages load faster -->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/modernizr.min.js"></script>
<script src="js/jquery.nicescroll.js"></script>

<!--data table-->
<script type="text/javascript" src="js/data-tables/jquery.dataTables.js"></script>
<script type="text/javascript" src="js/data-tables/DT_bootstrap.js"></script>

<!--common scripts for all pages-->
<script src="js/scripts.js"></script>

<!--script for editable table-->
<script src="js/editable-table.js"></script>


<!--初始化权限-->
<script src="orders.js"></script>
<script>
    //序列化Json
    function getFormJson(form) {
        var o = {};
        var a = form
        $.each(a, function () {
            if (o[this.name] !== undefined) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    }


    function cancel(){
        document.getElementById('contes').style.display = 'none';
    }
    function addItem(daid) {
        $("#dataform")[0].reset();
        $("#daid").val(daid)
        jump()
    }
    //提交修改
    function submithuoform(){
        var serialize = $("#dataform").serializeArray();
        var deptItem=getFormJson(serialize);
        console.log(deptItem)
        $.ajax({ //更新和添加用同一个接口即可
            url:"/dept/updateOrAdd",
            type:"POST",
            data: JSON.stringify(deptItem),
            contentType:"application/json;charset=UTF8",
            dataType:"json",
            success:function (res){
                if (res.success){
                    alert(res.msg);
                }
                else{
                    alert("操作失败!")
                }
            },
            error:function (){
                alert("莫名错误")
            }
        })

    }
    function jump() {
        document.getElementById('all_light');
        document.getElementById('contes').style.display = 'block';
    }
    function edit(daId,xId) {
        $.ajax({
            url:"/dept/getItemById",
            type:"POST",
            data:'{"daId":'+daId+',"xid":'+xId+'}',
            contentType:"application/json;charset=UTF8",
            dataType:"json",
            success:function (res){
                if (res.success){
                    var item=res.data
                    $("#daid").val(daId)
                    $("#id").val(xId);
                    $("#name").val(item.name);
                    $("#manager").val(item.manager);
                    $("#phone").val(item.phone);
                    $("#email").val(item.email);
                    console.log(item)
                    jump();
                }
                else{
                    alert("查询失败!")
                }
            },
            error:function (){
            }
        })
    }

    function delU(daId,xId) {
        $.ajax({
            url:"/dept/delItemById",
            type:"POST",
            data:'{"daId":'+daId+',"xid":'+xId+'}',
            contentType:"application/json;charset=UTF8",
            dataType:"json",
            success:function (res){
                alert(res.msg)
            },
            error:function (){
            }
        })
    }
    function showCai(list){
        $('#newList1').empty();
        for(var i=0;i<list.length;i++) {
            var tr="<tr>\n" +
                "<td>"+list[i].id+"</td>\n" +
                "<td>"+list[i].name+"</td>\n" +
                "<td>"+list[i].manager+"</td>\n" +
                "<td >"+list[i].phone+"</td>\n" +
                "<td>"+list[i].email+"</td>\n" +
                "<td><button style='background-color: #55d455 ' onclick=\"edit("+1+","+list[i].id+")\">修改信息</button></td>\n" +
                "<td><button type='submit' style='background-color: #ff3948;color: black' onclick=\"delU("+1+","+list[i].id+")\">删除信息</button></td>\n" +
                "</tr>"
            console.log(tr)
            $("#newList1").append(tr);
        }
    }

    function showSheng(list){
        $('#newList2').empty();
        for(var i=0;i<list.length;i++) {
            var tr="<tr>\n" +
                "<td>"+list[i].id+"</td>\n" +
                "<td>"+list[i].name+"</td>\n" +
                "<td>"+list[i].manager+"</td>\n" +
                "<td >"+list[i].phone+"</td>\n" +
                "<td>"+list[i].email+"</td>\n" +
                "<td><button style='background-color: #55d455 ' onclick=\"edit("+2+","+list[i].id+")\">修改信息</button></td>\n" +
                "<td><button type='submit' style='background-color: #ff3948;color: black' onclick=\"delU("+2+","+list[i].id+")\">删除信息</button></td>\n" +
                "</tr>"
            console.log(tr)
            $("#newList2").append(tr);
        }
    }

    function showXiao(list){
        $('#newList3').empty();
        for(var i=0;i<list.length;i++) {
            var tr="<tr>\n" +
                "<td>"+list[i].id+"</td>\n" +
                "<td>"+list[i].name+"</td>\n" +
                "<td>"+list[i].manager+"</td>\n" +
                "<td >"+list[i].phone+"</td>\n" +
                "<td>"+list[i].email+"</td>\n" +
                "<td><button style='background-color: #55d455 ' onclick=\"edit("+3+","+list[i].id+")\">修改信息</button></td>\n" +
                "<td><button type='submit' style='background-color: #ff3948;color: black' onclick=\"delU("+3+","+list[i].id+")\">删除信息</button></td>\n" +
                "</tr>"
            console.log(tr)
            $("#newList3").append(tr);
        }
    }
    window.onload=function (){
        var order;
        $.ajax({
            url:"/users/getOrder",
            type:"get",
            contentType:"application/json;charset=UTF8",
            dataType:"json",
            success:function (res){
                order=res;
                if(order==2){
                    order2();
                }
                if(order==3){
                    order3();
                }
            },
            error:function (){

            }
        })


        $.ajax({
            url:"/dept/getItemListById/1",
            type:"get",
            contentType:"application/json;charset=UTF8",
            dataType:"json",
            success:function (res){
                var deptItem=res.data
                showCai(deptItem)
            },
            error:function (){

            }
        })
        $.ajax({
            url:"/dept/getItemListById/2",
            type:"get",
            contentType:"application/json;charset=UTF8",
            dataType:"json",
            success:function (res){
                var deptItem=res.data
                showSheng(deptItem)
            },
            error:function (){

            }
        })
        $.ajax({
            url:"/dept/getItemListById/3",
            type:"get",
            contentType:"application/json;charset=UTF8",
            dataType:"json",
            success:function (res){
                var deptItem=res.data
                showXiao(deptItem)
            },
            error:function (){

            }
        })


    }


</script>

</body>
</html>
